<template>
  <view class="popup-page">
    <uni-swiper-dot v-if="props.isSwiper"
                    class="popup-container"
                    :current="props.currentIndex"
                    mode="dot"
                    :info="props.swiperInfo"
                    :dots-styles="dataMap.dotsStyles">
      <view class="page-swiper-container">
        <slot name="swiper"></slot>
      </view>
    </uni-swiper-dot>
    <view v-else class="popup-container bg-light">
      <view v-if="props.isHeader" class="header flex-between" :class="props.isBorderBottom ? 'border-bottom' : ''">
        <view class="title-left tl">
          <slot name="titleLeft">
          </slot>
        </view>
        <view class="title-center c303 tc">
          {{ props.title }}
        </view>
        <view class="title-right tr">
          <slot name="titleRight"></slot>
        </view>
      </view>
      <scroll-view scroll-y class="content">
        <slot name="content"></slot>
      </scroll-view>
    </view>
    <view class="footer flex f-jc">
      <view class="t-icon t-icon-icon-close" @click="dataMap.handleClose"></view>
    </view>
  </view>
</template>
<script lang="ts">
export default {
  name: 'UPopupPage',
  options: { styleIsolation: 'shared' }
}
</script>
<script lang="ts" setup>
import { reactive } from 'vue'
const props = defineProps({
  // 判断是否为轮播弹窗
  isSwiper: {
    type: Boolean,
    default: false
  },
  currentIndex: {
    type: Number,
    default: 0
  },
  // 存放swiper dot 元素
  swiperInfo: {
    type: Array,
    default: () => []
  },
  // 弹框标题
  title: {
    type: String,
    default: ''
  },
  // 判断是否显示header
  isHeader: {
    type: Boolean,
    default: true
  },
  // 头部是否显示下边框
  isBorderBottom: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['change'])
const dataMap = reactive({
  currentIndex: 0,
  dotsStyles: {
    backgroundColor: 'rgba(255,255,255,0.3)',
    border: 'rgba(255,255,255,0.3)',
    color: '#fff',
    selectedBackgroundColor: 'var(--bg-light-color)!important',
    selectedBorder: 'var(--bg-light-color)!important'
  },
  // 关闭分享弹框
  handleClose() {
    uni.navigateBack({ delta: 1 })
  },
  moveHandle() {
    // 解决弹框下边还能滑动
  }
})
</script>

<style lang="scss">
.popup-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .5);
  z-index: 900;
	padding-top: 260rpx;
  .popup-container {
    height: calc(100vh - 320rpx);
    .swiper-box {
      height: calc(100vh - 320rpx - 88rpx);
      background: var(--bg-light-color);
    }
  }
  // header栏
  .header {
    border-radius: 16rpx 16rpx 0px 0px;
    background: var(--bg-light-color);
    overflow: hidden;
    padding: 0 32rpx;
    height: 88rpx;
    view {
      flex: 1;
    }
    .title-center {
      font-size: 17px;
      font-weight: 600;
    }
  }
  .content {
    height: calc(100vh - 500rpx - 88rpx);
    background: var(--bg-light-color);
  }
  .border-bottom {
    border-bottom: 1rpx solid var(--line-color);
  }
  .footer {
    z-index: 999;
    height: 146rpx;
    background-color: rgba($color: var(--bg-light-color), $alpha: 0.5) !important;
    .t-icon-icon-close {
      margin-top: 18rpx;
      width: 64rpx;
      height: 64rpx;
    }
  }
  ::v-deep .uni-swiper__warp {
    .uni-swiper__dots-box {
      position: fixed;
      bottom: auto!important;
      top: 64rpx;
      left: 50%;
      right: auto;
      transform: translate(-50%, 0);
      background: rgba(255,255,255,0.2);
      border-radius: 12px;
      padding: 0 12rpx;
      height: 24rpx;
    }
  }
}
</style>
